import React, { useState } from "react";

// 函数组件保存数据状态
// 函数组件也可以和类组件一样 可以修改自己的状态 16.8 版本以后才有的特性 16.8 以前只能用类组件 
// 函数组件属性使用不需要写 this ,但是对于html 内调用同样有this指向问题
function App() {
  // 简单属性
  const [name, setName] = useState("小明");
  const [age, setage] = useState(100);
  const [address, setAddress] = useState("北京")

  // 复杂属性
  const [info, setInfo] = useState({
    name:"老王",
    age:18,
    interests:["游戏","篮球","动漫","小说"]
  })
  // console.log(obj)
  return (
    <div>
      <button
        onClick={() => {
          // console.log(name)
          //简单属性修改
          setName("小红");
          setage(18);
          setAddress("上海")
        }}
      >
        click
      </button>
      app-{name}--{age}--{address}

      <div >
        <div>个人信息</div>
        <div>
          <div><span>姓名:</span> {info.name} </div>
          <div><span>年龄:</span> {info.age} </div>
          <div><span>爱好:</span> 
            <ul>
              {info.interests.map((item,index)=>(
                  <li key={item}>
                    {item}
                  </li>
              ))}
              </ul>
           </div>
        </div>
        <button onClick={()=>{
          // 复杂属性修改
          const obj = {...info}
          obj.name = "老李"
          setInfo(obj)
        }}>
          click-个人信息
        </button>
      </div>

    </div>
  );
}

export default App;